import { View, Image, Text } from '@tarojs/components';
import { AtIcon, AtTag } from 'taro-ui';
import Taro from '@tarojs/taro';
import { payOrder, cancelOrder } from '@/service/apis/order';
import { globalStore } from '@/store';
import { payOrderUtils } from '../../utils';
import OrderTimeDown from '../../component/OrderTimeDown';
import OrderAddress from '../../component/OrderAddress';
import ProductItem from '../../component/ProductItem';
import OrderAmount from '../../component/OrderAmount';
import CallPhone from '../../component/CallPhone';
import OrderNumber from '../../component/OrderNumber';
import OrderUser from '../../component/OrderUser';
import OrderButton from '../../component/OrderButton';

export default function ({ orderDetail, productInfo, shopInfo }) {
  const { address, userName, userPhone, orderType, serviceType } = orderDetail;
  const { phone } = shopInfo;
  const onCancel = () => {
    Taro.showModal({
      title: '取消确认',
      content: '订单还未付款，确认取消吗',
      cancelText: '再考虑下',
      confirmText: '取消订单',
      confirmColor: '#f82256',
      success: async function (res) {
        if (res.confirm) {
          console.log('取消订单');
          try {
            await cancelOrder({
              order_sn: orderDetail.orderNumber,
            });
            Taro.showToast({
              title: '订单取消成功',
              duration: 2000,
            });
            setTimeout(() => {
              Taro.navigateBack({});
            }, 1000);
          } catch (error) {
            Taro.showToast({
              title: '订单取消失败',
              duration: 2000,
            });
          }
        } else if (res.cancel) {
          console.log('用户点击取消');
        }
      },
    });
  };
  const onPay = async () => {
    try {
      const { data } = await payOrder({
        order_sn: orderDetail.orderNumber,
      });
      console.log(data);
      const payParams = {
        pay_config: data.pay_config,
        type: orderType,
        orderCode: orderDetail.orderNumber,
        price: orderDetail.totalPrice
      };
      if (data.pay_config) {
        payOrderUtils(payParams);
      }
    } catch (err) {
      Taro.showToast({
        title: err?.message,
        icon: 'none',
      });
    }
  };
  const openMap = () => {
    const { lat, lng } = globalStore.currentShop;
    Taro.openLocation({
      latitude: lat,
      longitude: lng,
      success: () => {},
    });
  };

  const skuInfo = {
    name: productInfo.desc,
    price: productInfo.price,
    count: productInfo.count,
  };
  return (
    <View className="wait-pay-container">
      <OrderTimeDown orderDetail={orderDetail} />
      {serviceType === 1 ? (
        <OrderAddress
          orderType={orderDetail.orderType}
          address={address}
          userName={userName}
          userPhone={userPhone}
        />
      ) : (
        <View>
          <View className="shop-info" onClick={openMap}>
            <View className="shop-name">
              <AtTag type="primary" size="small">
                {orderType === 1 ? '自提门店' : '服务门店'}
              </AtTag>
              <Text>{shopInfo.name}</Text>
            </View>
            <View className="shop-address">{shopInfo.address}</View>
            <View className="iconfont icon-weizhi" />
          </View>
          <OrderUser orderDetail={orderDetail} />
        </View>
      )}

      <View className="section-block">
        <View className="shop-logo">
          <Image src={shopInfo.logo} />
          <Text>{shopInfo.name}</Text>
          <AtIcon value="chevron-right" size={20} color="#CCCCCC" />
        </View>
        <ProductItem product={productInfo} skuInfo={skuInfo} count={skuInfo.count} />
      </View>
      <CallPhone text="联系商家" phone={phone} />
      <OrderAmount orderDetail={orderDetail} />
      <OrderNumber orderDetail={orderDetail} />
      <OrderButton orderDetail={orderDetail} onCancel={onCancel} onPay={onPay} />
    </View>
  );
}
